;(function($){
    "use strict";
    $.fn.banner = function(ops){
        ops = ops || {};
        if(!ops.items){
            console.error("至少传入items，表示要渲染的图片信息")
            return;
        };
        let {items, btn=true, list=true, autoPlay=true, delayTime=2000, moveTime=200, index=0, activeStyle={} } = ops;
        let prev;
        init();
        function init(){
            let imgboxCont = "";
            for(let i=0;i<items.length;i++){
                imgboxCont += `<a href="${items[i].link}"><img src="${items[i].src}" alt="${items[i].alt}" title="${items[i].title}"></a>`
            }
            $("<div class='imgbox'></div>").appendTo($("#banner-wrap")).html(imgboxCont).css({
                width:800,
                height:450
            }).children("a").css({
                width:800,
                height:450,
                position:"absolute",
                left:800,
                top:0
            }).eq(index).css({
                left:0
            }).end().children("img").css({
                width:800,
                height:450
            })
        }
        if(btn){
            $("<div class='btns'></div>").appendTo(this).append($("<span class='left'>&lt;&lt;</span>")).append($("<span class='right'>&gt;&gt;</span>")).children("span").css({
                width:40,
                height:40,
                position:"absolute",
                top:205,
                textAlign:"center",
                lineHeight:"40px",
                background:"rgba(200,200,200,0.5)",
                cursor:"pointer"
            }).eq(1).css({
                right:0
            }).click(rightClick).end().eq(0).click(leftClick);

        }
        function rightClick(){
            if(index === items.length-1){
                index = 0;
                prev = items.length-1
            }else{
                index++
                prev = index - 1;
            }
            btnMove(1);
        }
        function leftClick(){
            if(index === 0){
                index = items.length-1;
                prev = 0;
            }else{
                index--
                prev = index + 1;
            }
            btnMove(-1);
        }
        function btnMove(d){
            $(".imgbox").children("a").eq(prev).css({
                left:0
            }).stop().animate({     
                left:-800 * d
            }, moveTime).end().eq(index).css({   
                left:800 * d
            }).stop().animate({    
                left:0
            }, moveTime)
            if(!list) return;
            $(".list").children("li").css({
                background:"",
                color:""
            }).eq(index).css(activeStyle)
        }
        if(list){
            let str = "";
            for(let i=0;i<items.length;i++){
                str += `<li>${i+1}</li>`
            }
            $("<ul class='list'></ul>").appendTo(this).html(str).css({
                position:"absolute",
                left:0,right:0,bottom:0,
                background:"rgba(200,200,200,0.5)",
                display:"flex",
                textAlign:"center",
                lineHeight:"30px"
            }).children("li").css({
                flex:1,
                borderLeft:"solid 1px #fff",
                borderRight:"solid 1px #fff"
            }).eq(index).css(activeStyle).end().click(function(){       
                if(index > $(this).index()){
                    listMove($(this).index(), -1)
                }
                if(index < $(this).index()){
                    listMove($(this).index(), 1)
                }

                $(".list").children("li").css({
                    background:"",
                    color:""
                }).eq($(this).index()).css(activeStyle)

                index = $(this).index();
            })

            function listMove(now, d){
                $(".imgbox").children("a").eq(index).css({   
                    left:0
                }).stop().animate({     
                    left:-800 * d
                }, moveTime).end().eq(now).css({   
                    left:800 * d
                }).stop().animate({     
                    left:0
                }, moveTime)
            }
        }
        if(autoPlay){
            let t = setInterval(() => {
                rightClick();
            }, delayTime);
            this.hover(function(){
                clearInterval(t)
            },function(){
                t = setInterval(() => {
                    rightClick();
                }, delayTime);
            })
        }
    }
})(jQuery);